<template>
	<view class="pageContent">
		<view class="memberMain">
			<view class="memberItem">
				<view class="memberItTi">成员真名</view>
				<view class="memberItVa">{{formData.name || '成员真名'}}</view>
			</view>
			<view class="memberItem">
				<view class="memberItTi">成员身份</view>
				<view class="memberItVa">{{formData.roleName || ''}}</view>
			</view>
			<view class="memberItem">
				<view class="memberItTi">身份证号</view>
				<view class="memberItVa">{{formData.idCardNumber || ''}}</view>
			</view>
			<view class="memberItem">
				<view class="memberItTi">出生年月</view>
				<view class="memberItVa">{{formData.birthday || ''}}</view>
			</view>
			<view class="memberItem">
				<view class="memberItTi">性<text style="color: #fff;">性别</text>别</view>
				<view class="memberItVa">{{formData.sex==0 ? '男':'女'}}</view>
			</view>
			<view class="memberItem">
				<view class="memberItTi">手机号码</view>
				<view class="memberItVa">{{formData.telephone || ''}}</view>
			</view>
			<view class="memberItem">
				<view class="memberItTi">门禁期限</view>
				<view class="memberItVa">{{formData.expireDate || '永久有效'}}</view>
			</view>
			<view class="memberItem" v-if="formData.idCardFrontUrl || formData.idCardBackUrl">
				<view class="memberItTi">证件照片</view>
				<view class="memberUpload">
					<image class="memberUpTrueIc" v-if="formData.idCardFrontUrl" :src="formData.idCardFrontUrl"
						@click="showPhoto(formData.idCardFrontUrl)" />
					<image class="memberUpTrueIc" v-if="formData.idCardBackUrl" :src="formData.idCardBackUrl"
						@click="showPhoto(formData.idCardBackUrl)" />
				</view>
			</view>
			<view class="memberItem"
				v-if="formData.leaseContractOneUrl || formData.leaseContractTwoUrl || formData.leaseContractThreeUrl || formData.leaseContractFourUrl || 1">
				<view class="memberItTi">租赁合同</view>
				<view class="memberUploadLea">
					<image class="memberUpLeaMa" v-if="formData.leaseContractOneUrl || 1" :src="formData.leaseContractOneUrl"
						@click="showPhoto(formData.leaseContractOneUrl)" />
					<image class="memberUpLeaMa" v-if="formData.leaseContractTwoUrl || 1" :src="formData.leaseContractTwoUrl"
						@click="showPhoto(formData.leaseContractTwoUrl)" />
					<image class="memberUpLeaMa" v-if="formData.leaseContractThreeUrl || 1"
						:src="formData.leaseContractThreeUrl" @click="showPhoto(formData.leaseContractThreeUrl)" />
					<image class="memberUpLeaMa" v-if="formData.leaseContractFourUrl || 1"
						:src="formData.leaseContractFourUrl" @click="showPhoto(formData.leaseContractFourUrl)" />
				</view>
			</view>
			<view class="memberItem" v-if="formData.applyReason">
				<view class="memberItTi">留<text style="color: #fff;">性别</text>言</view>
				<view class="memberItVa">{{formData.applyReason}}</view>
			</view>
			<view class="memberItem" v-if="formData.message">
				<view class="memberItTi">审批意见</view>
				<view class="memberItVa">{{formData.message}}</view>
			</view>
		</view>

		<view class="memberHouse" v-if="formData.roomInfo">
			<view class="">关联房屋</view>
			<view class="memberHouseRi">{{formData.roomInfo+'-'+formData.roomName}}</view>
		</view>

	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				password: '',
				headList: [{
						value: 1,
						name: '租户',
					},
					{
						value: 2,
						name: '父母',
					},
					{
						value: 3,
						name: '小孩',
					},
					{
						value: 3,
						name: '朋友',
					},
				],
				headIndex: -1,
				perList: [{
						value: 1,
						name: '男',
					},
					{
						value: 2,
						name: '女',
					},
				],
				perIndex: 0,
				formData: {
					name: "",
					date: "",
					dateLim: "",
					housename: "房屋1",
				},
				placeholder: '请填写与身份证上的姓名一致',
				placeholder2: '请填写与身份证号出身年月一致',
				placeholder3: '请填写出生地',
				placeholder4: '请填写手机号',
				placeholder5: '请选择门禁期限',
				date: '',
				dateLim: '',
			}
		},

		onLoad(options) {
			var title = '成员详情'
			this.id = options.id || 289;
			this.type = options.type || 0;
			if (this.type == 1) {
				var title = '审批详情'
			}
			wx.setNavigationBarTitle({
				title: title
			})
			if (options.json) {
				var json = JSON.parse(options.json)
				console.log('json', json)
				this.urlContact(json)
			} else {
				this.approva();
			}
			// var url="http://192.168.0.246:9000/picture/owner/2021-04-21/1619006106555.jpg"
			// this.showPhoto(url);
		},

		onShow() {

		},

		onUnload() {
			//清空数据
			this.formData = {}
		},


		methods: {
			showPhoto(...url) {
				console.warn('showPhoto', url)
				wx.previewImage({
					current: '', // 当前显示图片的http链接
					urls: url // 需要预览的图片http链接列表
				})
			},

			async approva() {
				var url = '/UserServer/owner/info/approva'
				var params = {
					roomApplyId: this.id,
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				this.formData = param;
			},

			//拼接图片地址
			urlContact(json) {
				if (json.idCardFrontUrl) {
					json.idCardFrontUrl = this.getFullPath(json.idCardFrontUrl);
					// console.log('json.idCardFrontUrl',json.idCardFrontUrl)
				}
				if (json.idCardBackUrl) {
					json.idCardBackUrl = this.getFullPath(json.idCardBackUrl);
				}
				if (json.leaseContractOneUrl) {
					json.leaseContractOneUrl = this.getFullPath(json.leaseContractOneUrl);
				}
				if (json.leaseContractTwoUrl) {
					json.leaseContractTwoUrl = this.getFullPath(json.leaseContractTwoUrl);
				}
				if (json.leaseContractThreeUrl) {
					json.leaseContractThreeUrl = this.getFullPath(json.leaseContractThreeUrl);
				}
				if (json.leaseContractFourUrl) {
					json.leaseContractFourUrl = this.getFullPath(json.leaseContractFourUrl);
				}
				this.formData = json;
			},

			//拼接图片地址:服务器地址前缀+接口返回地址
			getFullPath(url) {
				return config.IMAGE_APIHOST + url;
			},

		},

	}
</script>

<style scoped>
	.pageContent {
		height: 100vh;
		background: #F3F6F9;
		padding: 20rpx 0rpx 0rpx 0rpx;
	}

	.memberMain {
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 20rpx 30rpx;
	}

	.memberItem {
		display: flex;
		font-size: 30rpx;
		padding: 0rpx 0rpx 20rpx 0rpx;
	}

	.memberItTi {
		width: 130rpx;
		color: #333333;
		margin-right: 40rpx;
		text-align: justify;
		white-space: nowrap;
	}

	.memberItVa {
		color: #666666;
	}

	.memberRight {
		display: flex;
		height: 90rpx;
		width: 100%;
		align-items: center;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.memberItIn {
		width: 88%;
	}

	.memberItIc {
		width: 35rpx;
		height: 30rpx;

		margin: 0rpx 10rpx 0rpx 20rpx;
	}

	.perType {
		display: inline-block;
		width: 90rpx;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 4rpx;
		text-align: center;
		margin-right: 20rpx;
		color: $primary;
		border: 1rpx solid $primary;
	}

	.perType.select {
		background-color: $primary;
		color: #FFFFFF;
	}

	.memberUpload {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.memberUpTrueIc {
		display: inline-block;
		vertical-align: top;
		width: 230rpx;
		height: 152rpx;
	}

	.memberUploadLea {
		display: flex;
		width: 100%;
		padding: 20rpx 0rpx 20rpx 0rpx;
		/* outline: 1rpx solid green; */
	}

	.memberUpLeaMa {
		display: inline-block;
		width: 124rpx;
		height: 84rpx;
		/* outline: 1rpx solid red; */
	}

	.memberUpLeaMa:nth-child(n+2) {
		margin-left: 10rpx;
	}
	
	.memberUpLeaMa:last-child {
		margin-left: 12rpx;
	}

	.memberUpLea {
		display: inline-block;
		width: 124rpx;
		height: 84rpx;
	}

	.comePicRight {
		position: relative;
		display: flex;
		height: 90rpx;
		width: 100%;
		align-items: center;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.comePicLim {
		position: absolute;
		right: 10rpx;
		top: 26rpx;
		width: 35rpx;
		height: 30rpx;

		margin: 0rpx 10rpx 0rpx 0rpx;
	}

	.btOne {
		margin: 40rpx 0rpx 0rpx 0rpx;
	}

	.memberHouse {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		margin: 20rpx 0rpx 0rpx 0rpx;
		padding: 30rpx 30rpx 30rpx 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.memberHouseRi {
		max-width: 480rpx;
	}
</style>
